/*
* 报表数据解析引擎
* 每一个图表需要的参数，都单独处理，没有做统一逻辑封装
* 因为目前就两个页面，三种图形，加之需求老是变更，单个图形处理感觉更方便
* */
import {deepFullCopy, messages, formatNumber} from "share/common";
import {_ts, lengthStrShow} from "containers/data-center/report/report-utils";

export default {
  /*
  * 饼状图
  * 报销状态占比
  * */
  statusAmountReportExample: {
    title: {
      text: '',
      left: 'left',
      textStyle: {
        fontWeight: 400
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {c} ({d}%)"
    },
    legend: {
      bottom: 10,
      left: 'center',
      data: ['test']
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '60%'],
        data: [
          {value: 335, name: 'test'},
        ]
      }
    ]
  },
  /*
  * 柱状图
  * 费用类型占比
  * 部门费用占比 共用这个数据
  * 人员费用占比 共用这个数据
  * */
  expenseTypeReportExample: {
    title: {
      text: '',//初始化数据时设置
      left: 'left',
      textStyle: {
        fontWeight: 400
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    axisLabel: {
      interval: 119, // 自定义显示X轴坐标显示间隔
      textStyle: {
        color: '#626262',
        fontSize: '10',
      },
    },
    grid: {
      y: 20,
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: [
      {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      }
    ],
    xAxis: [
      {
        type: 'value',
        axisLabel: {
          interval: 0,
          rotate: 45,
          margin: 10,
          textStyle: {
            fontWeight: "bolder",
            color: "#000000"
          }
        },
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: 24,
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  },
  //费用总体趋势报表 有环比
  expenseTendencyReportHasTendencyExample: {
    title: {
      text: '',//初始化数据时设置
      left: 'left',
      textStyle: {
        fontWeight: 400
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    legend: {
      data: [messages('data-center.key58')/*当月金额*/, messages('data-center.key59')/*同比金额*/, messages('data-center.key60')/*同比*/, messages('data-center.key61')/*环比*/],
      bottom: 10,
      left: 'center',
    },
    xAxis: [
      {
        type: 'category',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#999999',
          }
        },
        data: ['1月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: messages('common.amount')/*金额*/,
        axisLabel: {
          formatter: '{value} 元'
        }
      },
      {
        type: 'value',
        name: messages('data-center.key62')/*比率*/,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: messages('data-center.key58')/*当月金额*/,
        type: 'bar',
        barWidth: 28,
        data: [21.0],
        //配置样式
        itemStyle: null,
      },
      {
        name: messages('data-center.key59')/*同比金额*/,
        type: 'bar',
        barWidth: 28,
        data: [12.6],
        //配置样式
        itemStyle: null,
      },
      {
        name: messages('data-center.key60')/*同比*/,
        type: 'line',
        yAxisIndex: 1,
        data: [20.0],
        //配置样式
        itemStyle: null,
      },
      {
        name: messages('data-center.key61')/*环比*/,
        type: 'line',
        yAxisIndex: 1,
        data: [20.0],
        //配置样式
        itemStyle: null,
      }
    ]
  },
  expenseTendencyReportExample: {
    title: {
      text: '',//初始化数据时设置
      left: 'left',
      textStyle: {
        fontWeight: 400
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    legend: {
      data: [messages('data-center.key58')/*当月金额*/, messages('data-center.key61')/*环比*/],
      bottom: 10,
      left: 'center',
    },
    xAxis: [
      {
        type: 'category',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#999999',
          }
        },
        data: ['1月'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: messages('common.amount')/*金额*/,
        axisLabel: {
          formatter: '{value} 元'
        }
      },
      {
        type: 'value',
        name: messages('data-center.key62')/*比率*/,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: messages('data-center.key58')/*当月金额*/,
        type: 'bar',
        barWidth: 28,
        data: [21.0],
        //配置样式
        itemStyle: null,
      },
      {
        name: messages('data-center.key61')/*环比*/,
        type: 'line',
        yAxisIndex: 1,
        data: [20.0],
        //配置样式
        itemStyle: null,
      }
    ]
  },
  //费用总体趋势报表
  expenseTendencyReport(data) {
    let options = deepFullCopy(this.expenseTendencyReportExample);
    options.title._text = messages('data-center.key68');
    /*费用总体趋势报表*/
    let xAxisData = [], baseAmountArr = [], qoqArr = [];
    data.map(item => {
      xAxisData.push(item.monthName);
      let item1 = deepFullCopy(item);
      baseAmountArr.push(item1);
      qoqArr.push(item.qoq ? item.qoq : 0);
    });
    options.xAxis[0].data = xAxisData;
    options.series[0].data = baseAmountArr;
    options.series[1].data = qoqArr;
    return options;
  },

  //费用总体趋势报表(有同比)
  expenseTendencyReportHasTendency(data) {
    let options = deepFullCopy(this.expenseTendencyReportHasTendencyExample), xAxisData = [], baseAmountArr = [],
      yoyAmountArr = [], yoyArr = [], qoqArr = [];
    data.map(item => {
      xAxisData.push(item.monthName);
      /*
      * 为什么要这样写？而不是直接 yoyAmountArr.push(item2.baseAmount)
      * 因为 点击图表的时候，要获取点击数据是哪一个月的数据具体信息
      * */
      let item1 = deepFullCopy(item), item2 = deepFullCopy(item);
      item1.value = item1.baseAmount ? item1.baseAmount : 0;
      baseAmountArr.push(item1);
      item2.value = item2.yoyAmount ? item2.yoyAmount : 0;
      yoyAmountArr.push(item2);
      yoyArr.push(item.yoy ? item.yoy : 0);
      qoqArr.push(item.qoq ? item.qoq : 0);
    });
    options.xAxis[0].data = xAxisData;
    options.series[0].data = baseAmountArr;
    options.series[1].data = yoyAmountArr;
    options.series[2].data = yoyArr;
    options.series[3].data = qoqArr;
    options.tooltip.formatter = function (datas) {
      let res = datas[0].name + '<br/>', val;
      for (let i = 0, length = datas.length; i < length; i++) {
        if (i > 1 && datas[i].value) {
          val = formatNumber(datas[i].value) + "%";
        } else {
          val = datas[i].value ? formatNumber(datas[i].value) : "";
        }
        res += datas[i].seriesName + "：" + val + "<br/>";
      }
      return res;
    };
    return options;
  },
  //费用类型分析
  expenseTypeReport(data) {
    let options = deepFullCopy(this.expenseTypeReportExample);
    options.title._text = messages('data-center.key86');
    /*费用类型分析*/
    let yAxisData = [], seriesData = [];
    data.map(item => {
      yAxisData.push(_ts(item.label));
      seriesData.push(item);
    });
    options.yAxis[0].data = yAxisData;
    options.series[0].data = seriesData;
    return options;
  },
  //部门费用分析
  departmentExpenseReport(data) {
    let options = deepFullCopy(this.expenseTypeReportExample);
    options.title._text = messages('data-center.key87');
    /*部门费用分析*/
    let yAxisData = [], seriesData = [];
    data.map(item => {
      yAxisData.push(_ts(item.label));
      seriesData.push(item);
    });
    options.yAxis[0].data = yAxisData;
    options.series[0].data = seriesData;
    /*
    * 提示框不截取字符串，由于字符串太长，不仅需要把字符串格式化，
    * 还需要对字符串显示的位置进行处理，不然显示在图标区外面，也会看不见
    * */
    options.tooltip.position = function (point, params, dom, rect, size) {
      // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
      // 提示框位置
      let x = 0, y = 0; // x坐标位置,y坐标位置
      // 当前鼠标位置
      let pointX = point[0], pointY = point[1];
      // 外层div大小
      // var viewWidth = size.viewSize[0];
      // var viewHeight = size.viewSize[1];
      // 提示框大小
      let boxWidth = size.contentSize[0], boxHeight = size.contentSize[1];
      // boxWidth > pointX 说明鼠标左边放不下提示框
      if (boxWidth > pointX) {
        x = 5;
      } else { // 左边放的下
        x = pointX - boxWidth;
      }
      // boxHeight > pointY 说明鼠标上边放不下提示框
      if (boxHeight > pointY) {
        y = 5;
      } else { // 上边放得下
        y = pointY - boxHeight;
      }
      return [x, y];
    };
    options.tooltip.formatter = function (datas) {
      let res = lengthStrShow(datas[0].data.departmentPath) + ":</br>", val;
      for (let i = 0, length = datas.length; i < length; i++) {
        val = datas[i].value ? formatNumber(datas[i].value) : "";
        res += val;
      }
      return res;
    };
    return options;
  },
  // 报销状态占比
  statusAmountReport(data) {
    let options = deepFullCopy(this.statusAmountReportExample);
    options.title._text = messages('data-center.key63');
    let legendData = [], seriesData = [];
    data.map(item => {
      legendData.push(item.label);
      let d = {
        value: item.value,
        name: item.label,
        criteria: item.criteria
      };
      seriesData.push(d);
    });
    options.legend.data = legendData;
    options.series[0].data = seriesData;
    //提示框不截取
    options.tooltip.formatter = function (datas) {
      return lengthStrShow(datas.name) + ":</br>" + formatNumber(datas.value);
    };
    return options;
  },

  // 人员费用分析
  userExpenseReport(data) {
    let options = deepFullCopy(this.expenseTypeReportExample);
    options.title._text = messages('data-center.key88');
    /*人员费用分析*/
    let yAxisData = [], seriesData = [];
    data.map(item => {
      yAxisData.push(_ts(item.label));
      let d = {
        value: item.value,
        name: item.label,
        criteria: item.criteria
      };
      seriesData.push(d);
    });
    options.yAxis[0].data = yAxisData;
    options.series[0].data = seriesData;
    return options;
  },
  //成本中心报表，一个或者多个
  costCenterReport(data) {
    let newData = [];
    data.map(item => {
      let obj = {
        name: item.name,
        costCenterExpenseEntity: costCenter(item.name, item.costCenterExpenseEntity, deepFullCopy(this.expenseTypeReportExample))
      };
      newData.push(obj)
    });
    return newData;

    /*
    * 处理每一个成本中心
    * @name 成本中心名称
    * @arr 单个成本中心
    * */
    function costCenter(name, data, options) {
      options.title._text = name;
      let yAxisData = [], seriesData = [];
      data.map(item => {
        yAxisData.push(_ts(item.label));
        seriesData.push(item);
      });
      options.yAxis[0].data = yAxisData;
      options.series[0].data = seriesData;

      options.tooltip.formatter = function (datas) {
        let res = lengthStrShow(datas[0].data.label) + ":</br>", val;
        for (let i = 0, length = datas.length; i < length; i++) {
          val = datas[i].value ? formatNumber(datas[i].value) : "";
          res += val;
        }
        return res;
      };
      return options;
    }
  },
  /*
  * 设置饼状图柱子的颜色
  * @params indexActive 点击柱形图序号
  * @params itemLength 柱形图数量
  * */
  getBarOptionsColors(indexActive, itemLength) {
    let colorList = [];
    for (let i = 0; i < itemLength; i++) {
      colorList.push('#ddd')
    }
    colorList[indexActive] = '#00386b';
    return colorList;
  },
  /*
   * 设置柱形图柱子的颜色
   * @params indexActive 点击柱形图序号
   * @params itemLength 柱形图数量
   * */
  getActiveItemStyle(indexActive, itemLength) {
    return {
      //通常情况下：
      normal: {
        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
        color: function (params) {
          let colorList = [];
          for (let i = 0; i < itemLength; i++) {
            colorList.push('#ddd')
          }
          if (indexActive >= 0) {
            colorList[indexActive] = '#00386b';
          }
          return colorList[params.dataIndex];
        }
      },

    }
  },
  /*
 * 设置柱形图柱子的颜色
 * @params params 被点击过的数据
 * @params options 当前画布被渲染的参数
 * */
  getActiveItemStyleByName(params, options) {
    let itemLength = options.series[0].data.length;
    let indexActive = getIndexActive(params, options);
    return {
      //通常情况下：
      normal: {
        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
        color: function (params) {
          let colorList = [];
          for (let i = 0; i < itemLength; i++) {
            colorList.push('#ddd')
          }
          if (indexActive >= 0) {
            colorList[indexActive] = '#00386b';
          }
          return colorList[params.dataIndex];
        }
      },
    };

    /*
    *
    * 获取当前被渲染的数据中，被激活元素的序号
    * @params params 被点击过的数据
    * @params options 当前画布被渲染的参数
    * @return 返回序号，没有则返回 -1
    * */
    function getIndexActive(params, options) {
      let criteria = params.data.criteria;
      let indexActive = -1;
      options.series[0].data.map((item, index) => {
        if (item.criteria === criteria) {
          indexActive = index
        }
      });
      return indexActive
    }
  },
  //成本中心有多个
  setCostCenterItemStyleNull(optionArr) {
    //其他报表 option.series[0].itemStyle = null;
    //成本中心报表需要每一个都设置
    optionArr.map(item => {
      let option = item.costCenterExpenseEntity;
      option.series[0].itemStyle = null;
    })
  },
  //成本中心有多个
  setCostCenterItemStyleActive(optionArr, params, chartIndex) {
    //其他报表 option.series[0].itemStyle = FRDEService.getActiveItemStyle(params.dataIndex, option.series[0].data.length);
    //成本中心报表需要每一个都设置
    optionArr.map((item, index) => {
      let option = item.costCenterExpenseEntity;
      if (chartIndex === index) {
        //根据激活的成本中心项置灰
        option.series[0].itemStyle = this.getActiveItemStyle(params.dataIndex, option.series[0].data.length);
      } else {
        //全部置灰
        option.series[0].itemStyle = this.getActiveItemStyle(-1, option.series[0].data.length);
      }
    })
  }
}
